<template>
  <el-dialog
    center
    :title="type == 'add' ? '添加' : '编辑'"
    v-model="Visible"
    width="40%"
    @close="handleClose"
  >
    <el-form
      :model="ruleForm"
      status-icon
      :rules="rules"
      ref="dialogForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-row>
        <el-col :span="12">
          <el-form-item label="设备名称" prop="equipmentName">
            <el-input v-model="ruleForm.equipmentName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="设备类型" prop="equipmentType">
            <el-input v-model="ruleForm.equipmentType"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="是否报警" prop="alarmOrNot">
            <el-radio-group v-model="ruleForm.alarmOrNot">
              <el-radio :label="0">是</el-radio>
              <el-radio :label="1">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="报警类型" prop="alarmType">
            <el-select v-model="ruleForm.alarmType" placeholder="请选择">
              <el-option
                v-for="item in alarmTypeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="报警时间" prop="alarmDate">
            <el-date-picker
              v-model="ruleForm.alarmDate"
              type="datetime"
              style="width:100%;"
              format="YYYY/MM/DD HH:mm:ss"
              value-format="YYYY/MM/DD HH:mm:ss"
              placeholder="选择日期时间"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="排序" prop="sort">
            <el-input
              v-model="ruleForm.sort"
              oninput="value=value.replace(/[^0-9.]/g,'')"
              autocomplete="off"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="备注" prop="remark">
            <el-input
              type="textarea"
              v-model="ruleForm.remark"
              autocomplete="off"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item>
        <el-button
          type="primary"
          v-preventReClick
          @click="submitForm('ruleForm')"
          >确定</el-button
        >
        <el-button @click="handleClose">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>
<script>
import { reactive, toRefs, ref, onMounted, nextTick } from "vue";
import { addEquipment, editEquipment } from "@/api/equipment";
import { ElMessage } from "element-plus";
import { dateFormat } from "@/utils/index";
export default {
  name: "UpdatePassword",
  props: {
    Visible: {
      type: Boolean,
      default: false,
    },
    dialogRow: {
      type: Object,
      default: () => {},
    },
    type: {
      type: String,
      default: "add",
    },
  },
  setup(props, context) {
    const dialogForm = ref(null);

    const state = reactive({
      alarmTypeOptions: [
        {
          label: "无",
          value: 0,
        },
        {
          label: "上限报警",
          value: 1,
        },
        {
          label: "持续上限报警",
          value: 2,
        },
        {
          label: "下限报警",
          value: 3,
        },
        {
          label: "持续下限报警",
          value: 4,
        },
        {
          label: "事件报警",
          value: 5,
        },
        {
          label: "关联报警",
          value: 6,
        },
      ],
      ruleForm: {
        heatSourceId: "",
        heatStationId: "",
        heatSystemId: "",
        equipmentName: "",
        equipmentType: "",
        alarmOrNot: 1,
        alarmType: "",
        alarmDate: "",
        remark: "",
        sort: 100,
      },
      rules: {
        equipmentName: [
          { required: true, message: "请输入设备名称", trigger: "blur" },
        ],
        equipmentType: [
          { required: true, message: "请输入设备名称", trigger: "blur" },
        ],
      },
    });

    onMounted(() => {
      if (props.type == "add") {
        nextTick(() => {
          dialogForm.value.resetFields();
          const { heatSourceId, heatStationId, heatSystemId } = props.dialogRow;
          state.ruleForm.heatSourceId = heatSourceId;
          state.ruleForm.heatStationId = heatStationId;
          state.ruleForm.heatSystemId = heatSystemId;
        });
      } else {
        state.ruleForm = props.dialogRow;
        state.ruleForm.alarmDate = dateFormat(
          props.dialogRow.alarmDate,
          "{y}/{m}/{d} {h}:{i}:{s}"
        );
      }
    });
    const submitForm = () => {
      dialogForm.value.validate((valid) => {
        if (valid) {
          if (state.ruleForm.alarmDate == "") {
            delete state.ruleForm.alarmDate;
          }

          if (props.type == "add") {
            addEquipment(state.ruleForm).then((res) => {
              if (res.data.success) {
                ElMessage.success(res.data.msg);
                handleClose();
                context.emit("refresh");
              }
            });
          } else {
            editEquipment(state.ruleForm).then((res) => {
              if (res.data.success) {
                ElMessage.success(res.data.msg);
                handleClose();
                context.emit("refresh");
              }
            });
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    };

    const handleClose = () => {
      context.emit("close", false);
    };

    return {
      ...toRefs(state),
      submitForm,
      dialogForm,
      handleClose,
    };
  },
};
</script>
